<script>
//1.导入子组件
import Child from "../components/Child.vue";
export default {
  name: "Parent",
  //注册子组件
  components: {
    Child
  },
  methods:{
    setAvatar(file){
      console.log('父组件获取到的头像：',file)
      //获取头像标签
      let img = this.$refs.avatar;
      //创建reader流
      let reader = new FileReader();
      //读文件
      reader.readAsDataURL(file);
      //重新加载图片
      reader.addEventListener('load',()=>{
        //重新设置头像
        img.src = reader.result;
      })
    }
  }
}
</script>

<template>
<!--头像 -->
  <div class="container">
  <h3>我是父组件</h3>
  <div class="header">
    <img  src="../assets/01.png" ref="avatar" alt="">
  </div>
<!--使用子组件:要是事件才能获取子组件中的值-->
    <Child @getAvatar="setAvatar" />
  </div>
</template>

<style scoped>
.container{
  width: 100%;
  height: 100vh;
  border: 1px solid red;
}
.header{
  display: flex;
  justify-content: right;
}
  .header img{
    width: 60px;
    height: 60px;
  }
</style>